<!--
 * @Description: 添加字典项弹窗
 * @FilePath: \hk-iot\src\views\system\dic\component\addDicTypeDialog.vue
 * @Date: 2023-07-19 14:05:07
 * @LastEditTime: 2023-11-30 09:03:04
-->
<template>
  <div class="box-container energy-from energy-dialog">
    <el-dialog center align-center v-model="state.isShowDialog" width="35%">
      <template #header="{ titleClass }">
        <div :class="titleClass">{{ state.isAdd ? '新增' : '修改' }}</div>
      </template>
      <el-form ref="sendSingleFormRef" :rules="state.rules" :model="state.ruleForm" size="default" label-width="100px">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典名称" prop="name">
              <el-input @input="onVerifyAndSpace1($event)" v-model="state.ruleForm.name" placeholder="请输入名称"
                clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典key" prop="key">
              <el-input @input="onVerifyAndSpace2($event)" v-model="state.ruleForm.key" placeholder="请输入key"
                clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flex row-center mt10 mb10">
        <div class="btn3" @click="onCancel">
          <el-icon> <ele-Close /> </el-icon><span class="ml6">取 消</span>
        </div>
        <div class="btn1  ml10" @click="onSubmit(sendSingleFormRef)">
          <el-icon> <ele-Check /> </el-icon><span class="ml6">保 存</span>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="addDicTypeDialog">
import { reactive, ref } from 'vue';
import { useDicApi } from '/@/api/system/dic';
import { ElMessage, FormInstance } from 'element-plus';
import {
  verifyAndSpace, //消除空格的
} from '/@/utils/toolsValidate'; // 工具类

const sendSingleFormRef = ref<FormInstance>();

const state = reactive<any>({
  isShowDialog: false,
  isAdd: true,
  ruleForm: {
    id: '',
    name: '',
    key: '',
  },
  rules: {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    key: [{ required: true, message: '请输入key', trigger: 'blur' }],
  },
});

const emit = defineEmits(['onParamSubmit']); // 子传父

// 禁止输入空格
const onVerifyAndSpace1 = (val: string) => {
  state.ruleForm.name = verifyAndSpace(val);
};
const onVerifyAndSpace2 = (val: string) => {
  state.ruleForm.key = verifyAndSpace(val);
};

// 打开弹窗
const openDialog = async (row: any = null) => {
  if (row) {
    //编辑详情
    state.isAdd = false;
    state.ruleForm.id = row.id;
    state.ruleForm.name = row.name;
    state.ruleForm.key = row.key;
  } else {
    state.isAdd = true;
    state.ruleForm.id = '';
    state.ruleForm.name = '';
    state.ruleForm.key = '';
  }
  state.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};

// 取消
const onCancel = () => {
  closeDialog();
};

// 表单提交
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      if (state.isAdd) {
        await useDicApi()
          .addDicType(state.ruleForm)
          .then((data: any) => {
            emit('onParamSubmit', data);
            ElMessage.success(data.msg || '新增成功');
            closeDialog();
          });
      } else {
        // 如果是编辑
        await useDicApi()
          .updateDicType(state.ruleForm)
          .then((data: any) => {
            emit('onParamSubmit', data);
            ElMessage.success(data.msg || '更新成功');
            closeDialog();
          });
      }
    } else {
      ElMessage.warning('表格项验证失败,请检查');
      console.log('表格项验证失败!', fields);
    }
  });
};

//弹出方法
defineExpose({
  openDialog,
  closeDialog,
  onCancel,
  onSubmit,
});
</script>

<style scoped lang="scss">
.mb20 {
  z-index: 0;
}

.mb20-cascadeValue {
  z-index: 1;
}

:deep(.el-form-item__label) {
  width: 91px;
}</style>
